<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../../build/dist/css/bsui_all.css">
    <title>Document</title>
    <style>
        form {width:900px; margin:50px auto;}
        .bsui-input + .bsui-input,
        .bsui-button + .bsui-button {margin-left: 15px;}
        
    </style>
</head>
<body>
    <form action="#" method="post" onsubmit="return false">
        <input class="bsui-input" type="text" placeholder="text">
        <input class="bsui-input" type="text" placeholder="text" value="输入框">
        <input class="bsui-input" type="text" placeholder="text" readonly>
<p>&nbsp;</p>
        <input class="bsui-input" type="text" placeholder="text" value="输入框" readonly>
        <input class="bsui-input" type="text" placeholder="text" disabled>
        <input class="bsui-input" type="text" placeholder="text" value="输入框" disabled>
<p>&nbsp;</p>
        <input class="bsui-input bsui-input-lg" type="text" placeholder="输入框">
        <input class="bsui-input" type="text" placeholder="输入框">
        <input class="bsui-input bsui-input-sm" type="text" placeholder="输入框">
        <input class="bsui-input bsui-input-xs" type="text" placeholder="输入框">
<p>&nbsp;</p>
        <input class="bsui-input" type="password" placeholder="password">
        <input class="bsui-input" type="text" name="auto" placeholder="测试autocomplete" autocomplete="on"> 
<p>&nbsp;</p>
        <select class="bsui-select">
            <optgroup label="水果">
                <option>苹果</option>
                <option disabled>香蕉</option>
                <option>梨</option>
                <option>葡萄</option>
                <option>西瓜</option>
            </optgroup>
            <optgroup label="蔬菜">
                <option>西兰花</option>
                <option>茄子</option>
                <option>西红柿</option>
            </optgroup>
        </select>
<p>&nbsp;</p>
        <label class="bsui-radio">
            <input type="radio" name="radio" checked>
            <span class="bsui-label-text">单选1</span>       
        </label>
        <label class="bsui-radio">
            <input type="radio" name="radio">
            <span class="bsui-label-text">单选2</span>
        </label>
        <label class="bsui-radio">
            <input type="radio" name="radio-disabled" disabled>
            <span class="bsui-label-text">禁用单选1</span>
        </label>
        <label class="bsui-radio">
            <input type="radio" name="radio-disabled" disabled checked>
            <span class="bsui-label-text">禁用单选2</span>
        </label>
<p>&nbsp;</p>
        <label class="bsui-checkbox">
            <input type="checkbox" name="checkbox" checked>
            <span class="bsui-label-text">多选1</span>
        </label>
        <label class="bsui-checkbox">
            <input type="checkbox" name="checkbox">
            <span class="bsui-label-text">多选2</span>
        </label>
        <label class="bsui-checkbox">
            <input type="checkbox" name="checkbox" disabled>
            <span class="bsui-label-text">禁用多选1</span>
        </label> 
        <label class="bsui-checkbox">
            <input type="checkbox" name="checkbox" disabled checked>
            <span class="bsui-label-text">禁用多选2</span>
        </label>       
<p>&nbsp;</p>
        <input class="bsui-input" type="search" placeholder="search">
<p>&nbsp;</p>
        <textarea class="bsui-textarea" rows="2" placeholder="textarea"></textarea>
        <textarea class="bsui-textarea" rows="2" placeholder="textarea" readonly></textarea>
        <textarea class="bsui-textarea" rows="2" placeholder="textarea" disabled></textarea>
<p>&nbsp;</p>
        <a href="javascript:;" class="bsui-button bsui-button-primary">链接按钮</a>
        <button class="bsui-button bsui-button-normal">
            <span>按钮1</span>
        </button> 
        <button class="bsui-button bsui-button-primary">
            <span>按钮2</span>
        </button>
        <button class="bsui-button bsui-button-success">
            <span>按钮3</span>

        </button> 
        <button class="bsui-button bsui-button-warning">
            <span>按钮4</span>
        </button> 
        <button class="bsui-button bsui-button-danger">
            <span>按钮5</span>
        </button>
<p>&nbsp;</p>
        <button class="bsui-button bsui-button-normal" disabled>
            <span>按钮1</span>
        </button> 
        <button class="bsui-button bsui-button-primary" disabled>
            <span>按钮2</span>
        </button>
        <button class="bsui-button bsui-button-success" disabled>
            <span>按钮3</span>

        </button> 
        <button class="bsui-button bsui-button-warning" disabled>
            <span>按钮4</span>
        </button> 
        <button class="bsui-button bsui-button-danger" disabled>
            <span>按钮5</span>
        </button>
<p>&nbsp;</p>
        <button class="bsui-button bsui-button-success bsui-button-lg">
            <span>大按钮</span>
        </button>        
        <button class="bsui-button bsui-button-success">
            <span>普通按钮</span>
        </button>        
        <button class="bsui-button bsui-button-success bsui-button-sm">
            <span>小按钮</span>
        </button>        
        <button class="bsui-button bsui-button-success bsui-button-xs">
            <span>超小按钮</span>
        </button>
<p>&nbsp;</p>
        <button class="bsui-button bsui-button-primary bsui-button-sm">
            <i class="bsui-icon-cog"></i>
        </button>
        <button class="bsui-button bsui-button-primary bsui-button-sm">
            <i class="bsui-icon-edit"></i>
        </button> 
        <button class="bsui-button bsui-button-primary bsui-button-sm">
            <i class="bsui-icon-filter"></i>
        </button>
        <button class="bsui-button bsui-button-primary bsui-button-sm">
            <i class="bsui-icon-search"></i>
        </button>
<p>&nbsp;</p>
        <label class="bsui-switch">
            <input type="checkbox">
            <span class="bsui-switch-base"></span>
        </label>
        <label class="bsui-switch">
            <input type="checkbox" checked>
            <span class="bsui-switch-base"></span>
        </label>
        <label class="bsui-switch">
            <input type="checkbox" disabled>
            <span class="bsui-switch-base"></span>
        </label>
        <label class="bsui-switch">
            <input type="checkbox" checked disabled>
            <span class="bsui-switch-base"></span>
        </label>    
    </form>
</body>
</html>